<template>
  <div class="top">
    <!-- <img class="imgicon" src="/static/img/hoticon.png" alt=""> -->
    <section class="container mt-5">
      <div class="row mt-1">
        <a class="col-sm-4 h7" v-for="(item, index) in booklist" :key="index" @click="jumpTo(item)">
          <dt class="img-box"><img :src="item.imgurl ? item.imgurl : '/static/img/' + item.id + '.png'"></dt>
          <dd class="mt-1 text-content">
            <p>{{ item.name.length > 42 ? item.name.substring(0, 42) + "..." : item.name }}</p>
            <p>{{ item.author }}</p>
            <p>{{ item.content }}</p>
          </dd>
        </a>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
      keyword: '',
      pagenum: 1,
      retlist: null,
      booklist: [],
      tab: this.$route.query.tab || ''
    }
  },

  mounted() {
    switch (this.tab) {
      case '浏览历史': {
        this.qryMarks()
        break
      }
      case '收藏书单': {
        this.qryCollection()
        break
      }
      default: this.qryLabel(this.tab)
    }
  },
  methods: {
    jumpTo(target) {
      this.$router.push({
        path: '/cover',
        query: {
          name: target.name,
          imgurl: target.imgurl,
          author: target.author,
          content: target.content,
          count: target.count,
          update_time: target.update_time,
          id: target.id
        }
      })
    },
    qryCollection() {
      this.post('collection', {
        pagenum: this.pagenum,
        pagesize: 20
      }, {emulateJSON: true}).then((response) => {
        this.booklist = response.data.data.list
      })
    },
    qryLabel(tab) {
      this.$http.post('api/label', {
        pagenum: this.pagenum,
        pagesize: 20,
        label: tab
      }, { emulateJSON: true }).then((response) => {
        this.booklist = response.data.data.list
      })
    },
    qryMarks() {
      this.post('qryMarks', {
        pagenum: 1,
        pagesize: 10
      }, { emulateJSON: true }).then((response) => {
        let ret = response.data
        this.booklist = ret.data.list
        if (ret.code === 0) {
          this.$store.commit('setLoginflag', '离线')
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.imgicon {
  width: 25%;
}

.text-content {
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  padding-left: 1rem;
  width: 70%;
}

.img-box {
  max-height: 7rem;
  max-width: 4rem;
  height: 90%;
  width: 25%;
}

.top {
  border-radius: 0.3rem;
  background-color: white;

  .container {
    margin-top: 0.2rem;

    .row {
      .col-sm-4 {
        background-color: white;
        border: px2rem(3) solid #ffffff;
        display: flex;
        align-items: center;
        margin-left: px2rem(10);

        // justify-content: space-between;
        .content {
          padding-left: 1rem;
          width: 70%;
        }
      }
    }
  }
}

.h7 {
  max-height: 7rem;
  border-bottom: 1px solid #ebebeb;
}
</style>
